<template>
  <a-popover :open="open">
    <template #content>
      <div style="color: #ff4d4f">{{ error }}</div>
    </template>
    <div style="display: flex; flex-wrap: nowrap; align-items: center">
      <span style="font-size: 24px; margin-right: 23px">
        <iconfont v-if="data.dataType === 'folder'" name="#icon-wenjianjia" />
        <iconfont v-else name="#icon-wenjian" />
      </span>
      <a-input
        type="text"
        v-model:value="name"
        :disabled="data.loading"
        placeholder="请输入"
        :maxlength="32"
      />
    </div>
  </a-popover>
</template>
<script setup>
import { computed, onUnmounted, ref, watch } from 'vue'
import { Form } from 'ant-design-vue'
import { useVModel } from '@vueuse/core'
import iconfont from '@/components/iconfont.vue'

/**
 * 外部参数
 */
let props = defineProps({
  name: { type: String },
  loading: { type: Boolean, default: () => false },
  data: { type: Object, required: true },
  rules: { type: Object, default: () => ({}) },
})
/**
 * 事件定义
 */
let emit = defineEmits(['update:name'])
/**
 * 双向绑定
 */
let name = useVModel(props, 'name', emit)
/**
 * 校验相关
 */
let useForm = Form.useForm
let { validateInfos, validate, resetFields } = useForm(props.data, props.rules)
let error = computed(() => {
  return validateInfos?.dataName?.help?.[0]?.[0]
})
let open = ref(false)
watch(error, e => {
  open.value = !!e
})
onUnmounted(() => {
  open.value = false
})

/**
 * 暴露相关方法
 */
defineExpose({
  validate,
})
</script>
